<template>
  <!--  时间选择 、取货方式 -->
  <view>
    <u-navbar :autoBack="true" :placeholder="true" bgColor="#F8F9FE">
      <template #center>
        <view></view>
      </template>
    </u-navbar>
    <view class="title">{{ title }}</view>
    <view class="card rowItem" v-for="(item, index) in timeList" :key="index" @click="timeClick(index)">
      <!-- <view>
        <text @click="openDateTimePickerHandler(index)">{{ true ? '请选择时间' : '' }}</text> -->
      <text>{{ item.time }}</text>
      <!-- </view> -->
      <image v-if="item.flag" src="http://qiniu.suboshimuying.cn/static/cart/check.png" mode=""></image>
      <image v-else src="http://qiniu.suboshimuying.cn/static/order/icon24@2x.png" mode=""></image>
    </view>
    <view class="fixedBox">
      <view class="fixedBox-item cancel" @click="bacnkClick">取消</view>
      <view class="fixedBox-item" @click="btnClick">确定</view>
    </view>

    <u-datetime-picker
      :show="isChooseState"
      v-model="timeValue[0].timeValueText"
      mode="date"
      @cancel="isChooseState = false"
      @confirm="confirmSelectDateHandler"
    ></u-datetime-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '选择时间',
      timeValue: [],
      timeIndex: 0, //选中time的索引
      type: null,
      userType: null,
      isChooseState: false
    }
  },
  onLoad(option) {
    console.log(option, 'option数据')
    // 必传
    //type： 1:选择时间  2:取货方式
    //userType：1:商家 2:用户
    this.type = option.type
    this.userType = option.userType

    switch (option.type) {
      case '1':
        this.title = '选择时间'

        if (option.userType == '1') {
          this.timeList = [
            { flag: false, time: '8:00-9:00' },
            { flag: false, time: '9:00-10:00' },
            { flag: false, time: '10:00-11:00' },
            { flag: false, time: '11:00-12:00' },
            { flag: false, time: '12:00-13:00' },
            { flag: false, time: '13:00-14:00' },
            { flag: false, time: '14:00-15:00' },
            { flag: false, time: '15:00-16:00' }
          ]
        } else {
          // let year = new Date().getFullYear()
          // let month = new Date().getMonth() + 1
          // let date = new Date().getDate()
          // let date2 = new Date().getDate() + 1
          let arrData = JSON.parse(option.timeList)
          // console.log(arrData)
          // let arr1 = arrData.map(item => {
          // 	return {
          // 		flag: false,
          // 		time: year + '-' + month + '-' + date + ' ' + item
          // 	}
          // })
          this.timeList = arrData.map(item => ({
            flag: false,
            time: item,
            timeValueText: ''
          }))
          console.log(this.timeList, '有数据么')
          // let arr2 = arrData.map(item => {
          //   return {
          //     flag: false,
          //     // time: year + '-' + month + '-' + date2 + ' ' + item
          //     time: item
          //   }
          // })
          // console.log(arr2)
          // this.timeList = [...arr1, ...arr2]
          // this.timeList = [...arr2]
        }
        break
      case '2':
        this.title = '取货方式'
        break
      default:
        break
    }
    // 选中当前选择
    if (option.value) {
      let arr = option.value.split(',')
      arr.forEach(item => {
        this.timeList.forEach(item2 => {
          if (item === item2.time) item2.flag = true
        })
      })
    }
  },
  methods: {
    timeClick(index) {
      if (this.userType == '1') {
        //商家多选
        this.timeList[index].flag = !this.timeList[index].flag
      } else {
        // 用户单选
        this.timeList.forEach(item => (item.flag = false))
        this.timeList[index].flag = true
      }
    },
    bacnkClick() {
      uni.navigateBack({})
    },
    btnClick() {
      let backArr = this.timeList.filter(item => item.flag === true)
      // console.log(backArr);
      if (backArr.length <= 5) {
        const eventChannel = this.getOpenerEventChannel()
        eventChannel.emit('timeBack', backArr)
        uni.navigateBack({})
      } else {
        this.$u.toast('最多选择5个')
      }
    },
    openDateTimePickerHandler(index) {
      this.isChooseState = true
      console.log(index, '选择日期索引')
    },
    confirmSelectDateHandler(e) {
      console.log(e, '选择时间')
    }
  }
}
</script>

<style>
page {
  box-sizing: border-box;
  padding: 0 24rpx 220rpx;
}
</style>
<style lang="scss" scoped>
.title {
  height: 56rpx;
  color: rgba(0, 0, 0, 0.9);
  font-size: 44rpx;
  font-weight: 700;
  line-height: 56rpx;
}

.rowItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(0, 0, 0, 0.8);
  font-size: 28rpx;
  font-weight: 500;

  image {
    width: 32rpx;
    height: 32rpx;
  }
}

.fixedBox {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 188rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: right;
  box-sizing: border-box;
  padding: 0 32rpx 68rpx;

  &-item {
    width: 328rpx;
    height: 88rpx;
    border-radius: 44rpx;
    color: #fff;
    text-align: center;
    line-height: 88rpx;
    background: rgba(128, 110, 254, 1);
  }

  .cancel {
    color: #000000 !important;
    background: rgba(248, 249, 254, 1) !important;
  }
}
</style>
